<template>
  <div>
    <button ref="box" @click="add">{{ num }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    add() {
      this.num++;
      console.log(this.num);

      // this.$nextTick(() => {
      //   console.log(this.$refs.box.innerHTML);
      // });
      setTimeout(() => {
        console.log(this.$refs.box.innerHTML);
      }, 0);
      // settime也可以把代码的执行顺序变成在dom更新之后执行
    },
  },
  created() {
    console.log("about页面的created");
  },
  activated() {
    console.log("abute页面的激活的钩子函数");
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
  name: "about",
};
</script>

<style lang="scss" scoped></style>
